<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>默认插槽</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div id="app">
      <p>插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签</p>
      <hr>
      <tode-item>
        <h3>这是标签h3</h3>
        这是一个默认插槽
        <h3>这是标签h2</h3>
      </tode-item>

    </div>
  </div>

  <script>
    // 当引入组件的地方没有写插槽内容，将显示子组件插槽中默认的值，
    // 如果没有默认值也没用写插槽内容，则插槽内容为空
    Vue.component('tode-item', {
      template: `
      <div>
        <slot>这里面是slot的默认值</slot>
      </div>
      `
    })

    var vm = new Vue({
      el: '#app'
    });
  </script>

</body>

</html>